<template>
    <div class="content">
        <div class="content-header">
            <div class="date-tab">
                <div class="tab-item" v-for="item in dateTab">
                    {{ item.title }}
                </div>
            </div>
            <div class="data-label"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const dateTab = ref([
    { title: '今日', code: 'today' },
    { title: '本周', code: 'yesterday' },
    { title: '本月', code: '30days' },
])


</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .content-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: clamp(1.5rem, 1.25vw, 3rem);

        .date-tab {
            display: flex;
            width: fit-content;

            .tab-item {
                width: clamp(2.875rem, 2.4vw, 5.75rem);
                height: clamp(1.75rem, 1.46vw, 3.5rem);
                background: rgba(51, 51, 51, 0.6);
                color: rgba(153, 153, 153, 1);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>